<template>
  <a-modal
    v-model:open="visible"
    title="影像资料"
    width="1000px"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="imaging-data-modal">
      <!-- 搜索区域 -->
      <div class="search-area">
        <a-form layout="inline">
          <a-form-item label="检查日期">
            <a-range-picker
              v-model:value="searchForm.dateRange"
              style="width: 240px"
              @change="handleDateRangeChange"
            />
          </a-form-item>
          <a-form-item label="检查类型">
            <a-select
              v-model:value="searchForm.examType"
              placeholder="检查类型"
              style="width: 120px"
            >
              <a-select-option value="CT">CT</a-select-option>
              <a-select-option value="MRI">MRI</a-select-option>
              <a-select-option value="X光">X光</a-select-option>
              <a-select-option value="超声">超声</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item class="smart-query-form-item smart-margin-left10">
            <a-button-group>
              <a-button type="primary" @click="handleSearch">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button>
                <template #icon>
                  <ReloadOutlined />
                </template>
                重置
              </a-button>
            </a-button-group>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="showUploadModal">
              上传影像
            </a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 表格区域 -->
      <div class="table-area">
        <a-table
          :columns="columns"
          :dataSource="tableData"
          size="small"
          bordered
          rowKey="id"
          :loading="tableLoading"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'imagingUrl'">
              <div class="imaging-url-cell">
                <div class="url-links">
                  <a :href="record.imagingUrl" target="_blank" class="url-link">
                    {{ record.imagingUrl }}
                  </a>
                  <br />
                  <a
                    :href="record.imagingUrl2"
                    target="_blank"
                    class="url-link"
                  >
                    {{ record.imagingUrl2 }}
                  </a>
                </div>
                <div class="qr-code">
                  <img :src="record.qrCode" alt="二维码" class="qr-image" />
                </div>
              </div>
            </template>
            <template v-else-if="column.dataIndex === 'imagingPicture'">
              <div class="imaging-picture">
                <a
                  class="preview-link"
                  @click="previewImage(record.imagingPicture)"
                >
                  上传图片
                </a>
                <br />
                <img
                  :src="record.imagingPicture"
                  alt="影像图片"
                  class="thumbnail"
                />
              </div>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-area">
        <a-pagination
          v-model:current="searchForm.pageNum"
          v-model:pageSize="searchForm.pageSize"
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="searchForm.pageSize"
          :total="total"
          :show-total="showTableTotal"
          @change="loadImagingData"
          @showSizeChange="loadImagingData"
        />
      </div>
    </div>

    <!-- 图片预览模态框 -->
    <a-modal
      v-model:open="previewVisible"
      title="图片预览"
      :footer="null"
      width="800px"
    >
      <img
        :src="previewImageUrl"
        alt="预览图片"
        style="width: 100%; height: auto"
      />
    </a-modal>
  </a-modal>
  <!--
  <FileUpload
    v-model:visible="uploadModalFlag"
    :max-size="20"
    :max-upload-size="5"
    accept=".JPG"
    @upload-success="handleUploadSuccess"
    @upload-error="handleUploadError"
  /> -->

  <!-- <a-modal v-model:open="uploadModalFlag" title="上传影像" @onCancel="hideUploadModal" @ok="hideUploadModal">
    <FileUpload
      list-type="text"
      :maxUploadSize="5"
      buttonText="点击上传文件"
      :defaultFileList="[]"
      :multiple="true"
      :folder="FILE_FOLDER_TYPE_ENUM.REPORT.value"
    />
  </a-modal> -->
</template>

<script setup>
import { ref } from "vue";
// import { message } from "ant-design-vue";
import { reportApi } from "@/api/report-api";
import {
  PAGE_SIZE,
  PAGE_SIZE_OPTIONS,
  showTableTotal
} from "@/constants/common-const";
// import { smartSentry } from "/@/lib/smart-sentry";
// import FileUpload from "@/components/file-upload/index.vue";

const props = defineProps({
  reportId: {
    type: String,
    default: ""
  }
});

const emit = defineEmits(["update:visible"]);

const visible = ref(false);
const previewVisible = ref(false);
const previewImageUrl = ref("");
const total = ref(0);
const tableLoading = ref(false);
const searchForm = {
  startDate: "",
  endDate: "",
  healthReportId: props.reportId,
  checkType: null,
  pageNum: 1,
  pageSize: PAGE_SIZE
};
// ------------- 上传文件 --------------------
const uploadModalFlag = ref(false);

function showUploadModal() {
  uploadModalFlag.value = true;
}

function hideUploadModal() {
  uploadModalFlag.value = false;
  loadImagingData();
}
// 添加时间范围变化处理方法
const handleDateRangeChange = (dates, dateStrings) => {
  if (dates) {
    searchForm.startDate = dateStrings[0];
    searchForm.endDate = dateStrings[1];
  } else {
    searchForm.startDate = null;
    searchForm.endDate = null;
  }
};

const columns = [
  {
    title: "检查编码",
    dataIndex: "examCode",
    width: 120
  },
  {
    title: "检查类型",
    dataIndex: "examType",
    width: 80
  },
  {
    title: "检查项目",
    dataIndex: "examItem",
    width: 150
  },
  {
    title: "检查时间",
    dataIndex: "examTime",
    width: 100
  },
  {
    title: "影像地址/二维码",
    dataIndex: "imagingUrl",
    width: 300
  },
  {
    title: "影像图片",
    dataIndex: "imagingPicture",
    width: 120
  }
];

const tableData = ref([
  {
    id: "1",
    examCode: "1029003190008",
    examType: "CT",
    examItem: "头部-ct头PCTA",
    examTime: "2021-02-12",
    imagingUrl: "http://hospital.medicaldhi.com",
    imagingUrl2: "http://hospital.medicaldhi.com",
    qrCode:
      "",
    imagingPicture: "/api/placeholder/100/80"
  },
  {
    id: "2",
    examCode: "1029003190008",
    examType: "CT",
    examItem: "胸部",
    examTime: "2021-02-12",
    imagingUrl: "http://hospital.medicaldhi.com",
    imagingUrl2: "http://hospital.medicaldhi.com",
    qrCode:
      "",
    imagingPicture: "/api/placeholder/100/80"
  },
  {
    id: "3",
    examCode: "1029003190008",
    examType: "CT",
    examItem: "手腕",
    examTime: "2021-02-12",
    imagingUrl: "http://hospital.medicaldhi.com",
    imagingUrl2: "http://hospital.medicaldhi.com",
    qrCode:
      "",
    imagingPicture: "/api/placeholder/100/80"
  },
  {
    id: "4",
    examCode: "1029003190008",
    examType: "CT",
    examItem: "前胸",
    examTime: "2021-02-12",
    imagingUrl: "http://hospital.medicaldhi.com",
    imagingUrl2: "http://hospital.medicaldhi.com",
    qrCode:
      "",
    imagingPicture: "/api/placeholder/100/80"
  },
  {
    id: "5",
    examCode: "1029003190008",
    examType: "CT",
    examItem: "大腿",
    examTime: "2021-02-12",
    imagingUrl: "http://hospital.medicaldhi.com",
    imagingUrl2: "http://hospital.medicaldhi.com",
    qrCode:
      "",
    imagingPicture: "/api/placeholder/100/80"
  }
]);

// 显示弹窗
const showModal = reportId => {
  visible.value = true;
  loadImagingData(reportId);
};

// 隐藏弹窗
const handleCancel = () => {
  visible.value = false;
};

// 搜索
const handleSearch = () => {
  searchForm.pageNum = 1;
  loadImagingData();
};
// 预览图片
const previewImage = imageUrl => {
  previewImageUrl.value = imageUrl;
  previewVisible.value = true;
};

// 加载影像数据
const loadImagingData = async () => {
  tableLoading.value = true;
  try {
    const response = await reportApi.queryImageList(searchForm);
    if (response && response.data) {
      tableData.value = response.data.list;
      total.value = response.data.total;
    }
  } catch (err) {
    // smartSentry.captureError(err);
  } finally {
    tableLoading.value = false;
  }
};

// 暴露方法给父组件
defineExpose({
  showModal
});
</script>

<style scoped>
.imaging-data-modal {
  .search-area {
    padding: 16px;
    margin-bottom: 16px;
    background: #fafafa;
    border-radius: 6px;
  }

  .table-area {
    margin-bottom: 16px;
  }

  .imaging-url-cell {
    display: flex;
    gap: 12px;
    align-items: center;

    .url-links {
      flex: 1;

      .url-link {
        font-size: 12px;
        color: #1890ff;
        word-break: break-all;
      }
    }

    .qr-code {
      .qr-image {
        width: 40px;
        height: 40px;
        border: 1px solid #d9d9d9;
      }
    }
  }

  .imaging-picture {
    text-align: center;

    .preview-link {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      color: #1890ff;
    }

    .thumbnail {
      width: 60px;
      height: 48px;
      cursor: pointer;
      object-fit: cover;
      border: 1px solid #d9d9d9;
    }
  }

  .pagination-area {
    text-align: right;
  }
}
</style>
